<template>
  <div>
    <van-grid>
      <van-grid-item
        v-for="(item, index) in dishList"
        :key="index"
        @click="selectDish(index)"
        icon="photo-o"
        :text="item.title"
      />
    </van-grid>
  </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from "vue";
import { showNotify, closeNotify } from "vant";
import "vant/es/notify/style";

export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const dishList = ref([]);

    onMounted(() => {
      proxy.$http("/Cuisine-classification").then((res) => {
        dishList.value = [
          ...res.data,
          {
            title: "更多",
          },
        ];
      });
    });
    return {
      dishList,
    };
  },
  methods: {
    // 点击菜品分类
    selectDish(index) {
      if (index != this.dishList.length - 1) {
        showNotify({ type: "warning", message: "该功能未完善" });
        setTimeout(() => {
          closeNotify();
        }, 3000);
        return;
      } else {
        this.$router.push({
          name: "more-feature",
        });
      }
    },
  },
};
</script>

<style scoped>
.van-grid-item:last-child /deep/ .van-icon {
  background-color: red;
  display: none;
}
</style>